<template>
  <!-- 达人市场 -->
  <div class="wdzh">
    <!-- 筛选栏 -->
    <div class="query">
      <div class="type-label">行业分类：</div>
      <my-select
        :checked="checked"
        :list="industryList"
        @changeChecked="changeChecked"
      ></my-select>
      <div class="tab-block">
        <div class="label">平台分类：</div>
        <div class="tab-list">
          <div
            v-for="(item, index) in tabList"
            :key="index"
            class="list-item"
            :class="{ active: item.label == activeTab.label }"
            @click="handleClickTabItem(item)"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
    </div>
    <!-- 主体 -->
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10"
      class="container"
    >
      <div v-for="(item, index) in dataList" :key="index" class="list-item">
        <div class="left">
          <div class="type">{{ item.hangye }}</div>
          <div class="name">{{ item.nickname }}</div>
          <img class="avatar" :src="item.avatar" />
        </div>
        <div class="right">
          <div class="info">
            <div class="label">粉丝数量</div>
            <div class="number">{{ item.fans }}</div>
          </div>
          <div class="info">
            <div class="label">总播放量</div>
            <div class="number">{{ item.totalplay }}</div>
          </div>
          <div class="info">
            <div class="label">平均播放</div>
            <div class="number">{{ item.averageplay }}</div>
          </div>
          <div class="info">
            <div class="label">最大播放</div>
            <div class="number">{{ item.maxplay }}</div>
          </div>
        </div>
        <div v-if="item.status == 1" class="icon-block">
          <div class="text">已认证</div>
        </div>
      </div>
      <div v-if="loading" class="loading">
        <div>加载中...</div>
      </div>
      <div v-if="noMore" class="no-more">
        <div>没有更多了</div>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
import mySelect from "@/components/mySelect.vue";
export default {
  components: {
    mySelect,
  },
  data() {
    return {
      loading: false,
      currentPage: 1,
      pageSize: 15,
      noMore: false,
      checked: {
        label: "全部",
        value: "",
      },
      industryList: [],
      activeTab: { label: "抖Y", value: "douyin" },
      tabList: [
        { label: "抖Y", value: "douyin" },
        { label: "快S", value: "kuaishou" },
      ],
      dataList: [],
    };
  },
  async mounted() {
    await this.getIndustryList();
  },
  methods: {
    // 获取行业分类列表
    async getIndustryList() {
      let data = await this.$api.drsc_industryList();
      let industryList = [];
      for (let key in data) {
        industryList.push({
          label: data[key],
          value: key,
        });
      }
      this.industryList = industryList;
    },
    async getData() {
      this.loading = true;
      let filter = {};
      filter.type = this.activeTab.value;
      if (this.checked) {
        filter.hangye = this.checked.value;
      }
      let res = await this.$api.drsc_getData({
        page: this.currentPage,
        limit: this.pageSize,
        filter,
      });
      this.dataList.push(...res.data);
      if (res.data.length) {
        this.currentPage++;
      } else {
        this.noMore = true;
      }
      this.loading = false;
      console.log(res.data, "res.data");
    },
    changeChecked(checked) {
      this.checked = checked;
      this.currentPage = 1;
      this.dataList = [];
      this.getData();
    },
    handleClickTabItem(item) {
      this.activeTab = item;
      this.currentPage = 1;
      this.dataList = [];
      this.getData();
    },
    loadMore() {
      if (!this.noMore) {
        this.getData();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.wdzh {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 262px 0 0px 0;
  box-sizing: border-box;
}
.query {
  position: absolute;
  top: 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 210px;
  padding: 8px 45px 0 45px;
  box-sizing: border-box;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
  .type-label {
    font-size: 14px;
    height: 26px;
  }
  .tab-block {
    display: flex;
    align-items: center;
    width: 100%;
    height: 54px;
    .label {
      width: 104px;
      color: #333;
      font-size: 14px;
    }
    .tab-list {
      display: flex;
      align-items: center;
      .list-item {
        width: 56px;
        height: 24px;
        margin-right: 114px;
        border-radius: 4px;
        text-align: center;
        line-height: 24px;
        color: #387CF7;
        letter-spacing: 3px;
        cursor: pointer;
        font-size: 16px;
        border: 1px solid #387CF7;
      }
      .active {
        color: #fff;
        border: none;
        background-color: #387CF7;
      }
    }
  }
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0px 0 20px 0;
  box-sizing: border-box;
  overflow: auto;
  .list-item {
    position: relative;
    display: flex;
    width: 100%;
    height: 174px;
    padding: 30px 230px 30px 52px;
    box-sizing: border-box;
    background-color: #fff;
    margin-bottom: 25px;
    overflow: hidden;
    .left {
      position: relative;
      width: 200px;
      height: 100%;
      flex-shrink: 0;
      .type {
        position: absolute;
        left: 0;
        right: 0;
        width: 80px;
        height: 24px;
        line-height: 24px;
        color: #fff;
        font-size: 13px;
        text-align: center;
        background-color: #387CF7;
        border-radius: 5px;
      }
      .name {
        position: absolute;
        top: 0;
        left: 100px;
        color: #333;
        font-size: 16px;
      }
      .avatar {
        position: absolute;
        left: 48px;
        bottom: 0;
        width: 68px;
        height: 68px;
        border-radius: 50%;
        background-color: #ccc;
      }
    }
    .right {
      flex-grow: 1;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      height: 100%;
      .info {
        width: 220px;
        text-align: center;
        margin-bottom: 15px;
        .label {
          color: #808595;
          font-size: 15px;
          margin-bottom: 20px;
        }
        .number {
          color: #333;
          font-size: 17px;
          font-weight: bold;
        }
      }
    }
    .icon-block {
      position: absolute;
      right: -80px;
      top: 0;
      width: 300px;
      height: 35px;
      background-color: #FFEEEE;
      transform: rotateZ(45deg);
      transform-origin: center;
      .text {
        position: absolute;
        right: 88px;
        top: 50%;
        transform: translate(0, -50%);
        font-size: 14px;
      }
    }
  }
  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    background-color: #fff;
  }
  .no-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    background-color: #fff;
  }
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #e8e8e8;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background: #f5f5f5;
  }
}
</style>